import styles from './index.module.scss'
import Down from '@/assets/Home/Down.png'
import img1 from '@/assets/Home/Group_626147.png'
import img2 from '@/assets/Home/Rectangle_4453.png'
import mask1 from '@/assets/Situation/mask1.png'
import mask2 from '@/assets/Situation/mask2.png'
import mask3 from '@/assets/Situation/mask3.png'
import mask4 from '@/assets/Situation/mask4.png'
import mask5 from '@/assets/Situation/mask5.png'
import mask6 from '@/assets/Situation/mask6.png'
import * as echarts from 'echarts'
import { useEffect } from 'react'
import { SearchOutlined } from '@ant-design/icons'
import { Space, Table, Tag } from 'antd'
import './table.scss'

const columns = [
  {
    title: '',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '房间外活动时间',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '增减',
    key: 'add',
    dataIndex: 'add',
  },
]

const data = [
  {
    key: '1',
    id: '1',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

const Situation = () => {
  useEffect(() => {
    var myChart = echarts.init(document.getElementById('chart'))

    var option = {
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      grid: {
        left: '-25%',
        right: '-15%',
        bottom: '-5%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',

          data: ['过去4周', '过去3周', '过去2周', '过去1周'],
          show: false,
        }
      ],
      yAxis: [
        {
          type: 'value',
          show: false,  // 隐藏 Y 轴
          axisLine: {
            show: false  // 隐藏 Y 轴线
          },
          axisTick: {
            show: false  // 隐藏 Y 轴刻度
          }
        }
      ],
      series: [
        {
          name: 'Line 1',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 5,

          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'rgb(1, 191, 236)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [140, 232, 101, 264]
        },
        {
          name: 'Line 2',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 5
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(0, 221, 255)'
              },
              {
                offset: 1,
                color: 'rgb(77, 119, 255)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 282, 111, 234]
        },
        {
          name: 'Line 3',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 5
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(55, 162, 255)'
              },
              {
                offset: 1,
                color: 'rgb(116, 21, 219)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 512, 510, 460]
        }
      ]
    }

    option && myChart.setOption(option)

  }, [])
  return (
    <div className={styles.main}>
      <div>
        <div className={styles.title}>
          长者活动情况
        </div>
        <div className={styles.img2}>
          <img src={img2} alt="" />
        </div>
        <div className={styles.img1}>
          <img src={img1} alt="" />
        </div>

        <div className={styles.selectContainer}>
          <div className={styles.selectBox}>
            <select className={styles.select}
              style={{
                backgroundImage: `url(${Down})`,
                backgroundPosition: "right 16px center"
              }}
            >
              <option>南二楼</option>
              <option>南四楼</option>
              <option>南五楼</option>
              <option>南六楼</option>
            </select>
          </div>
          <div className={styles.selectBox}>
            <select className={styles.select}
              style={{
                backgroundImage: `url(${Down})`,
                backgroundPosition: "right 16px center"
              }}
            >
              <option>过去一周</option>
              <option>过去一个月</option>
              <option>过去一年</option>
            </select>
          </div>
          <div className={styles.selectBox}>
            <select className={styles.select}
              style={{
                backgroundImage: `url(${Down})`,
                backgroundPosition: "right 16px center"
              }}
            >
              <option>所有老人</option>
              <option>所有男人</option>
              <option>所有女人</option>
            </select>
          </div>
        </div>


        <div className={styles.mask1}>
          <img src={mask1} alt="" />
        </div>
        <div className={styles.mask2}>
          <img src={mask2} alt="" />
        </div>
        <div className={styles.mask3}>
          <img src={mask3} alt="" />
        </div>
        <div className={styles.mask4}>
          <img src={mask4} alt="" />
        </div>
        <div className={styles.mask5}>
          <img src={mask5} alt="" />
        </div>
        <div className={styles.mask6}>
          <img src={mask6} alt="" />
        </div>
      </div>

      <div className={styles.right}>
        <div className={styles.rightTitle}>
          活力值详情
        </div>
        <div className={styles.rightChart}>
          <div className={styles.rightChartTitle}>
            变化趋势
            <span className={styles.rightChartText}>
              南三楼
            </span>
          </div>
          <div className={styles.chart} id='chart'>
          </div>
          <div className={styles.chartXAxis}>
            <span>
              过去第4周
            </span>
            <span>
              过去第3周
            </span>
            <span>
              过去第2周
            </span>
            <span>
              过去第1周
            </span>
          </div>
        </div>
        <div className={styles.rightCard}>
          <div className={styles.rightCardTitle}>
            长者排行
          </div>
          <div className={styles.inputIcon}>
            <SearchOutlined />
          </div>
          <input size="large" placeholder="查找老人"
            className={styles.input}
          />

          <div>
            <table className={styles.table}>
              <thead>
                <tr>
                  <th>
                    <span style={{
                      visibility: 'hidden'
                    }}>
                      序号
                    </span>
                  </th>
                  <th>姓名</th>
                  <th>房间外活动时间</th>
                  <th>增减</th>
                </tr>

              </thead>
              <tbody>
                <tr>
                  <td style={{
                    color: '#929292'
                  }}>1</td>
                  <td>刘奶奶</td>
                  <td>
                    <span
                      style={{
                        fontFamily: "Montserrat",
                        fontWeight: 'bold'
                      }}
                    >
                      9.2
                    </span>
                    &nbsp;h/Day
                  </td>
                  <td className={styles.add}>↑1.2%</td>
                </tr>
                <tr>
                  <td style={{
                    color: '#929292'
                  }}>2</td>
                  <td>张爷爷</td>
                  <td>
                    <span
                      style={{
                        fontFamily: "Montserrat",
                        fontWeight: 'bold'
                      }}
                    >
                      8.3
                    </span>
                    &nbsp;h/Day
                  </td>
                  <td className={styles.dec}>↑1.2%</td>
                </tr>
                <tr>
                  <td style={{
                    color: '#929292'
                  }}>3</td>
                  <td>李爷爷</td>
                  <td>
                    <span
                      style={{
                        fontFamily: "Montserrat",
                        fontWeight: 'bold'
                      }}
                    >
                      7.5
                    </span>
                    &nbsp;h/Day
                  </td>
                  <td className={styles.add}>↑1.2%</td>
                </tr>
                <tr>
                  <td style={{
                    color: '#929292'
                  }}>3</td>
                  <td>李爷爷</td>
                  <td>
                    <span
                      style={{
                        fontFamily: "Montserrat",
                        fontWeight: 'bold'
                      }}
                    >
                      7.5
                    </span>
                    &nbsp;h/Day
                  </td>
                  <td className={styles.add}>↑1.2%</td>
                </tr>
                <tr>
                  <td style={{
                    color: '#929292'
                  }}>3</td>
                  <td>李爷爷</td>
                  <td>
                    <span
                      style={{
                        fontFamily: "Montserrat",
                        fontWeight: 'bold'
                      }}
                    >
                      7.5
                    </span>
                    &nbsp;h/Day
                  </td>
                  <td className={styles.add}>↑1.2%</td>
                </tr>
                <tr>
                  <td style={{
                    color: '#929292'
                  }}>3</td>
                  <td>李爷爷</td>
                  <td>
                    <span
                      style={{
                        fontFamily: "Montserrat",
                        fontWeight: 'bold'
                      }}
                    >
                      7.5
                    </span>
                    &nbsp;h/Day
                  </td>
                  <td className={styles.add}>↑1.2%</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Situation